<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Gioco</title>
<meta name="author" content="Fabio Fondi">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/favicon.ico">
<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="libs/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="styles/css/login.css" rel="stylesheet">	

</head>

<body>
	<nav class="navbar navbar-inverse" id="menu" style="margin-bottom: 0;" role="navigation">
	
		<div class="navbar-header">
    		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
      			<span class="sr-only">Men&ugrave;</span>
      			<span class="icon-bar"></span>
      			<span class="icon-bar"></span>
      			<span class="icon-bar"></span>
    		</button>
    		<a class="navbar-brand" href="#">TITOLO</a>
    	</div>
    	
    	<div class="collapse navbar-collapse" id="main">
			<ul class="nav navbar-nav pull-left" style="padding: 1em">
				<li>
					<span class="text-danger">Max: <strong>18</strong></span>
					<span class="text-info"> Min: <strong>7</strong></span> 
					<span class="text-muted"><strong>Meteo</strong></span>
				</li>
			</ul>
			
			<ul class="nav navbar-nav pull-right">
				<li><a href="#"> Mappa </a></li>
				<li><a href="#"> Forum </a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Wiki <b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a href="#"> Anagrafe </a></li>
						<li><a href="#"> Elenco Volti </a></li>
						<li><a href="#"> Razze </a></li>
						<li><a href="#"> Corporazioni </a></li>
						<li><a href="#"> Lista Staff </a></li>
						<li><a href="#"> Storia </a></li>
						<li><a href="#"> Ambientazione </a></li>
						<li><a href="#"> Regolamento </a></li>
						<li><a href="#"> Guida </a></li>
					</ul>
				</li>
				<li>
					<a href="#modalMessage" data-target="#modalMessage" role="button" data-toggle="modal">
						Missive <span id="labelMessage" class="label">0</span>
					</a>
				</li>
				<li class="dropdown" id="profile">
            		<a class="dropdown-toggle" href="#" data-toggle="dropdown">Scheda <strong class="caret"></strong></a>
            		<ul class="dropdown-menu" style="padding: 15px;">
            			<li>
            				<div class="caption text-center">
            					<h6>Nome Utente</h6>
            				</div>
            				<a href="#" class="tip" data-placement="bottom" data-toggle="tooltip" title="Scheda Personaggio" style="padding: 0; margin: 0 0 0.8em 0; width: 130px; height: 130px;">
            					<img data-src="styles/imgs/no-av.png" class="img-responsive img-circle" src="styles/imgs/no-av.png" style="width: 130px; height: 130px;">
            				</a>
            			</li>
            			<li class="text-center">
            				<div class="btn-group btn-group-xs">
            					<button type="button" class="btn btn-primary">Equip.</button>
            					<button type="button" class="btn btn-warning">sudo</button>
            				</div>
            			</li>
            			<li class="divider"></li>
						<li><h6 class="text-info">Impostazioni</h6></li>
						<li class="divider"></li>
						<li><a tabindex="-1" href="#">Account</a></li>
						<li><a tabindex="-1" href="#">Notifiche</a></li>
						<li><a tabindex="-1" href="#">Opzioni</a></li>
						<li><a tabindex="-1" href="#">Cronologia</a></li>
            		</ul>
          		</li>
          		<li>
          			<form action="logout.php" method="post">
						<button class="btn btn-danger navbar-btn tip" role="button" data-placement="bottom" data-toggle="tooltip" title="Esci">
							<i class="glyphicon glyphicon-off"></i>
						</button>
					</form>
				</li>          				
			</ul>

		</div>
	</nav>

	<div class="container" style="margin: 0; padding:0;width: 100%;">
	
		<div class="row-">
			<div class="col-xs-6 col-md-3" id="colLeft" style="background: #FFF">
				<a href="#" class="thumbnail">
					<img data-src="styles/imgs/no-av.png" withd="130px" height="130px" class="img-responsive" src="styles/imgs/no-av.png" alt="">
				</a>
				
				<ul class="nav nav-tabs" style="margin-top: 5em;">
					<li class="active" ><a href="#online-list" data-toggle="tab">Online</a></li>
					<li><a href="#logs-list" data-toggle="tab">Logs</a></li>
				</ul>
				<div class="tab-content" style="min-height: 30em;">
					<div class="tab-pane fade in active" id="online-list">
						<p>Ricerca utenti online</p>
					</div>
					<div class="tab-pane fade" id="logs-list">
						<p>Caricamento lista dei logs.</p>
					</div>
				</div>
			
			</div>
  			<div class="col-xs-12 col-sm-6 col-md-9" id="colRight" style="background: #333;">
  			 	<div id="chat" style="padding: 1em;">
  			 		
  			 	</div>
  			</div>
  			    		
		</div>

	</div>
	
	<div class="text-center" id="hideBottomOut" style="position: absolute; bottom: 0; width: 100%; display:none;"><i class="glyphicon glyphicon-chevron-up"></i></div>
	
	<div class="navbar navbar-fixed-bottom" style="background: #FFF" id="inputChat" role="navigation">
		<p class="text-center" id="hideBottom"><i class="glyphicon glyphicon-chevron-down"></i></p>
		<div id="actionChat" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li><a href="#">Sacca</a></li>
				<li><a href="#">Azioni</a></li>
				<li><a href="#">Suggerimenti</a></li>
    			<li class="dropdown">
    				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    					<i class="glyphicon glyphicon-chevron-up"></i> Nel luogo
    				</a>
    				<ul class="dropdown-menu" style="padding: 15px;">
    					<li><a tabindex="-1" href="#">Carla</a></li>
						<li><a tabindex="-1" href="#">Tizio</a></li>
						<li><a tabindex="-1" href="#">Caio</a></li>
						<li><a tabindex="-1" href="#">Coco</a></li>
					</ul>
    			</li>
    		</ul>
			<form id="formSendChat" class="navbar-form" action="#" method="post">
				<div class="form-group" style="width: 50%;">
					<textarea rows="6" style="width: 100%;"></textarea>
				</div>
				<button type="submit" class="btn btn-success">Invia</button>
    		</form>
    	</div>
    </div>
    
    <div id="modalNewMessage" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="titleNewMessage" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
			
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="titleNewMessage">Scrivi una nuova Missiva</h4>
				</div>

				<div class="modal-body">
					<form action="#" id="formSendMessage" method="post" role="form">
						<div class="form-group">
							<label for="mail_to">Destinatario</label>
							<input type="text" data-provide="typeahead" autocomplete="off" class="form-control typeahead" name="mail_to" id="mail_to">
						</div>
						<div class="form-group">
							<label for="mail_text">Testo della Missiva</label>
							<textarea class="form-control" rows="6" name="mail_text" id="mail_text"></textarea>
						</div>
						<div>
							<label class="radio-inline">
								<input type="radio" name="for_game" id="for_game_Y" value="1" checked>
								Missiva di gioco
							</label>
							<label class="radio-inline">
								<input type="radio" name="for_game" id="for_game_N" value="0">
								Missiva non di gioco
							</label>
						</div>
						
						<button type="button" id="messageSendSubmit" class="btn btn-default">Invia</button>
					</form>
				</div>
				
			</div>
		</div>
	</div>
	
	<div id="modalMessage" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="titleMessage" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
			
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="titleMessage">Missive</h4>
				</div>

				<div class="modal-body">
					<p><a href="#modalNewMessage" data-target="#modalNewMessage" role="button" data-toggle="modal" class="btn btn-primary" >Scrivi una nuova missiva </a></p>
					<div class="tabbable">
						<ul class="nav nav-tabs">
							<li class="active">
								<a href="#inarrivo" data-toggle="tab">In Arrivo</a>
							</li>
							<li class="disabled">
								<a href="#inviati"  data-toggle="tab">Inviati</a>
							</li>
							<li class="disabled">
								<a href="#archiviati" data-toggle="tab">Archiviati</a>
							</li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane active" id="inarrivo">
								<table class="table .table-striped">
									<thead>
										<tr>
											<th>Data</th>
											<th>Mittente</th>
											<th>Oggetto</th>
											<th>Testo</th>
											<th>Opzioni</th>
										</tr>
									</thead>
									<tbody>
										
									</tbody>
									
								</table>
								<div class="loading text-center"> Caricamento... </div>
							</div>
							<div class="tab-pane" id="inviati">
								<table class="table .table-striped">
									<thead>
										<tr>
											<th>Data</th>
											<th>Destinatario</th>
											<th>Oggetto</th>
											<th>Testo</th>
											<th>Opzioni</th>
										</tr>
									</thead>
									<tbody>
										
									</tbody>
									
								</table>
								<div class="loading text-center"> Caricamento... </div>
							</div>
							<div class="tab-pane" id="archiviati">
								<table class="table .table-striped">
									<thead>
										<tr>
											<th>Data</th>
											<th>Mittente</th>
											<th>Oggetto</th>
											<th>Testo</th>
											<th>Opzioni</th>
										</tr>
									</thead>
									<tbody>
										
									</tbody>
									
								</table>
								<div class="loading text-center"> Caricamento... </div>
							</div>
						</div>
					</div>
				</div>
			
			</div>
		</div>
		
	</div>

	<script src="libs/jquery/jquery-1.10.2.min.js"></script>
	<script src="libs/bootstrap/js/bootstrap.min.js"></script>
	<script src="libs/jrumble/jquery.jrumble.1.3.min.js"></script>
	<script src="js/function-custom.js"></script>
	<script>
		$(function() {
			
			// Istanzio i tooltip
			$('.tip').tooltip();
			// Istanzio i dropdown-menu
			$('.dropdown-toggle').dropdown();
			// Fisso il bug per non farli sparire al click su di loro
			fixDropdown();
			
			// faccio un primo caricamento della lista dei presenti
			onlineList();
			// metto un intervallo di tempo per il controllo periodico
			setInterval(function() {
				onlineList();
			}, 30000);
			
			// faccio un primo controllo se ci sono nuovi messaggi
			checkMessage();
			// metto un intervallo di tempo per il controllo periodico
			setInterval(function() {
				checkMessage();
			}, 30000);
			
			// faccio un primo caricamento della lista dei logs
			logsList();
			// metto un intervallo di tempo per il controllo periodico
			setInterval(function() {
				logsList();
			}, 30000);
				 
			// Quando si apre la finestra dei messaggi carico la sua lista
			$('#modalMessage').on('shown.bs.modal', function ()
			{
				messageInBox();
			})
			
			$('#hideBottom').click(function() {
				$('#inputChat').fadeToggle(130, function() {
					$('#hideBottomOut').slideToggle();
				});
			});
			
			$('#hideBottomOut').click(function() {
				$('#hideBottomOut').slideToggle(function() {
					$('#inputChat').fadeToggle();
				});
			});
			
			$('#messageSendSubmit').click(function () {
				var dataMess = $('#formSendMessage').serialize();
				alert(dataMess);
				
				/*$.ajax({
					type: "POST",
					url: 'message_send.php',
					data: dataMess,
					success: function () {*/
						$("#formSendMessage").prepend('<div class="alert alert-success text-center alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Messaggio inviato con successo</div>');
					/*}
				});*/
			});

		});
	</script>

</body>
</html>
